<template>
  <div id="order-detail">
      <!-- 头部 -->
      <div class="header w100p bg-fff flex jc-sb pl-20 pt-15">
          <p class="base">&lt; 返回</p>
          <p class="p1">订单详情</p>
      </div>
      <!-- 中间 -->
      <div class="center w100p">
          <!-- 中间上部分 -->
          <div class="top flex fdc jc-sb">
              <div class="top1 w100p  fff flex jc-sb aic">
                  <span>订单已取消</span>
                  <img src="https://file.sdyxmall.com/h5/v1/public/app/img/cancel.ff91da7.png" alt="">
              </div>
              <div class="top2 w100p bg-fff flex aic pl-10 pr-10">
                  <img src="https://mall.s.maizuo.com/bcc961c6faea5b9a2467c9d759db3cd6.png">
                  <div class="fg1 ml-10 flex fdc jc-sb">
                      <p class="f14">【山东】海阳网纹瓜 2个5斤装（2.4-2.6斤/枚）</p>
                      <p class="flex jc-sb">
                          <span class="base">&yen;35.<text class="f12">80</text></span>
                          <span class="f14 textcolor">x8</span>
                      </p>
                  </div>
              </div>
          </div>
          <!-- 中间中部分 -->
          <div class="ctr w100p bg-fff flex fdc jc-sa">
              <p class="f14 flex jc-sb aic ml-10 mr-10">
                  <span class="textcolor">商品金额</span>
                  <span>&yen;286.40</span>
              </p>
              <p class="f14 flex jc-sb aic ml-10 mr-10">
                  <span class="textcolor">运费</span>
                  <span>&yen;0.00</span>
              </p>
              <p class="f20 flex jc-sb aic ml-10 mr-10 pb-5">
                  <span>实付</span>
                  <span class="base">&yen;286.40</span>
              </p>
          </div>
          <!-- 中间下部分 -->
          <div class="bottom bg-fff mt-10 f12 w100p pl-10 pr-10 flex fdc jc-c">
              <p class="flex jc-sb aic">
                  <span class="textcolor">订单编号 62cd3942df4e04114d52fbcb</span>
                  <button class="f12">复制</button>
              </p>
              <p class="textcolor">下单时间 2022-07-12 09:05:06</p>
          </div>
      </div>
      <!-- 底部 -->
      <div class="footer w100p bg-fff fixed flex jc-sb aic pl-10 pr-10">
          <p>订单状态: 已取消</p>
          <p>重新购买</p>
      </div>
    
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
@import './orderDetail.less';
</style>